<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="../../css/joint.css" rel="stylesheet"/>
<link href="../../css/paper.css" rel="stylesheet"/>
<body>

    <div id="paper"></div>
    <script src="../../js/jquery.js"></script>
    <script src="../../js/lodash.js"></script>
    <script src="../../js/backbone.js"></script>
    <script src="../../js/joint.js"></script>

    <script>
        let graph = new joint.dia.Graph;

        let paper = new joint.dia.Paper({
            el:$("#paper"),
            width:1000,
            height:600,
            gridSize:10,
            model:graph,
            defaultLink: function() {
                return new joint.shapes.standard.Link();
            }
        });

        let source = new joint.shapes.standard.Rectangle();
        source.position(50,50);
        source.resize(100,50);
        source.attr("label/text","开始");
        source.attr("text/magnet",true);//文字开启连接效果
        source.addTo(graph);

        let target = source.clone();
        target.position(50,250);
        target.attr("id",2);
        target.attr("label/text","结束");
        target.attr("text/magnet",false);
        target.addTo(graph)

        paper.on('link:connect', function(linkView, evt, elementView) {
            // console.log(linkView);
        });

        //画布元素点击事件
        paper.on('cell:pointerup', function(cellView, e) {
            if(cellView.targetView == null){
                //如果元素未连接在一起就，删除箭头
                cellView.model.remove();
            }
        });

    </script>

</body>
</html>